<template>
	<div class = 'menu-item-wrapper' @click="itemClick">
		<div class = 'menu-icon'>
			<i :class = "`iconfont ${icon}`"></i>
		</div>
		<div>{{name}}</div>
	</div>
</template>

<script>
export default {
	name: 'MenuItem',
	props:['name','icon','handleClick','id'],
	
    data () {
		return {
			
		}
    },

    created: function () {
      
    },
    computed: {
           
    },
    methods:{
      	itemClick: function(){
			if(this.handleClick){
				this.handleClick(this.id)
			}
			
		}
    }
}
</script>

<style lang="scss">
	.menu-item-wrapper{
		display: inline-block;
		text-align: center;
		height: 65px;
		min-width:85px;
		overflow: hidden;
		padding: 7px 15px 0 15px;
		cursor: pointer;
		transition: all .3s;
		.menu-icon{
			.iconfont{
				font-size: 25px;
			}
		}
		&:hover{
			background-color:#f7f7f7;
			color: #409eff;
		}
	}
</style>